<template>
  <view class="min-h-[100vh] bg-[#F3F5F9]">
    <view class="sticky top-0 bg-white z-10">
      <up-tabs :list="tabsList" :scrollable="false" activeStyle="color: #3c9cff;" @change="handleChange"></up-tabs>
    </view>
    <view>
      <view class="bgBox">
        <view class="BB_Left">
          <view class="BBL_Top">
            <view class="BBLT_Left">总收益</view>
            <view class="BBLT_Right">提现</view>
          </view>
          <view class="BBL_Bottom">￥{{ priceData.riderBalance }}</view>
        </view>
        <up-line color="#fff" direction="col"></up-line>
        <view class="BB_Right">
          <view class="BBR_Left">今日收益</view>
          <view class="BBR_Right">￥{{ priceData.riderDailyBalance }}</view>
        </view>
      </view>
      <view class="flex justify-between items-center text-[#7A7A7A] p-[24rpx]">
        <view>共 {{ num }} 单</view>
        <view class="flex items-center" @click="onSort">
          <image src="../../static/image/sort.png" style="width: 36rpx; height: 36rpx" />
          <view>排序</view>
        </view>
      </view> 
      <view class="px-[24rpx]">
        <view class="bg-white mb-[24rpx] last:mb-0 text-[28rpx]" v-for="(item,index) in list" :key="index">
          <view class="p-[24rpx] flex items-center justify-between">
            <view>
              <view class="text-[#222]">
                <text class="text-[28rpx]">#</text>
                <text class="text-[64rpx] font-bold">
                  {{ index+1 }}
                </text>
              </view>
              <view class="text-[26rpx] text-[#666]">
                {{ item.dueTime }} 前送达
              </view>
            </view>
            <view class="tag" :style="{
              background: `rgba(${orderStatus[0].color}, 0.2)`,
            }">
              <view class="w-[14rpx] h-[14rpx] rounded-full" :style="{
                background: `rgba(${orderStatus[0].color}, 1)`,
              }"></view>
              <view :style="{
                color: `rgba(${orderStatus[0].color}, 1)`,
              }">{{ orderStatus[0].tagText }}</view>
            </view>
          </view>
          <view class="border-y border-[#eee]">
            <view class="flex items-center px-[30rpx] py-[24rpx]">
              <view>{{ item.user.nickName }}</view>
              <view class="ml-[24rpx]">手机尾号 {{ item.receiveMoblie.substr(-4) }}</view>
              <view class="ml-auto" @click="callPhone(item.receiveMoblie)">
                <up-icon name="phone-fill" color="#333" size="36rpx"></up-icon>
              </view>
            </view>
            <view class="flex items-center justify-between px-[30rpx] py-[24rpx]">
              <view class="text-[#959595]">配送地址</view>
              <view>{{ item.address }}</view>
            </view>
          </view>
          <view class="flex items-center justify-between px-[30rpx] py-[24rpx]">
            <view> {{ item.appOrderGoodList.length }} 种商品，共 {{ allNum(item.appOrderGoodList) }} 件</view>
            <view>预计收入 ￥{{ item.riderAmount }}</view>
          </view>
          <view class="border-y border-[#eee]">
            <view class="flex items-center justify-end px-[30rpx] py-[24rpx]" v-if="currentUnfold !== item" @click="currentUnfold = item">
              <view>展开完整信息</view>
              <view class="ml-[8rpx]">
                <up-icon name="arrow-down" color="#333" size="36rpx"></up-icon>
              </view>
            </view>
            <view class="h-0 scale-y-0 origin-top overflow-hidden transition-all duration-300" :class="{
              'scale-y-100': currentUnfold === item,
              '!h-auto': currentUnfold === item,
            }">
              <view class="px-[30rpx] py-[24rpx]">
                <view class="flex items-center justify-between mb-[24rpx] last:mb-0" v-for="( it,el ) in item.appOrderGoodList" :key="el">
                  <view class="flex-[3] line-clamp-1">{{ it.goodName }}</view>
                  <view class="flex-[1]">×{{ it.num }}</view>
                  <view class="flex-[2] text-right">￥{{ it.payPrice }}</view>
                </view>
              </view>
              <view class="flex items-center border-t border-[#eee] justify-between px-[30rpx] py-[24rpx] text-[#666]">
                <view>小计</view>
                <view>￥{{ item.payPrice - item.riderAmount }}</view>
              </view>
            </view>
          </view>
          <view class="py-[24rpx] flex items-center justify-center">
            <view class="btn" v-if="item.riderStatus<4" @click="handleOption(item.riderStatus,item.id)" :style="{
              background: `rgba(${orderStatus[Number(item.riderStatus)].color}, 1)`, 
            }">{{ orderStatus[Number(item.riderStatus)].btnText }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from "vue";
import { onShow } from '@dcloudio/uni-app' 
import { getReceiving, getReceivingHall, IHaveDelivered, StartDelivery, userRebate } from "../../API/ReceivingHall";
const { list , tabsList, handleChange , GetOrderList , pageObj , num } = useTabs(); // 标签
const { orderStatus, currentUnfold, handleOption , allNum , onSort , callPhone , shouYi , priceData } = useOrder(); // 订单
/**
 * @description 标签
 * @returns {Object} tabsList 标签数据
 * @returns {Function} handleChange 切换标签
 */
function useTabs() {
  const pageObj = reactive({
    pageNum:1,
    pageSize:10,
    riderStatus:1
  })
  const tabsList = reactive([
    { name: "推荐", value: 1 },
    { name: "已接单", value: 2 },
    { name: "开始配送", value: 3 },
    { name: "配送完成", value: 4 },
  ]);
  const list = ref([])
  const num = ref(0)
  const GetOrderList = async () => {
    let { rows , total } = await getReceivingHall(pageObj)
    list.value = rows
    num.value = total
  }
  const handleChange = async (e) => {
    pageObj.riderStatus = e.value
    await GetOrderList()
  }
  return { list , tabsList , handleChange , GetOrderList , pageObj , num };
}
/**
 * @description 订单
 * @returns {Object} orderStatus 订单状态
 * @returns {Number} currentUnfold 当前展开项
 * @returns {Function} handleOption 当前订单操作按钮事件
 */
function useOrder() {
  const currentUnfold = ref(0);
  const priceData = ref({});
  const orderStatus = reactive({
    0:{

    },
    1: {
      tagText: "等待接单",
      color: "70, 167, 253",
      btnText: "接受订单",
      fn: async (id) => {
        let { data } = await getReceiving(id)
        uni.showToast({
          title: '接受订单成功',
          icon: 'none'
        })
        await GetOrderList()
      },
    },
    2: {
      tagText: "已接单",
      color: "8, 205, 124",
      btnText: "开始配送",
      fn: async(id) => {
        let { data } = await StartDelivery(id)
        await GetOrderList()
      },
    },
    3: {
      tagText: "配送中",
      color: "255, 211, 0",
      btnText: "我已送达",
      fn: async (id) => {
        let { data } = await IHaveDelivered(id)

        await GetOrderList()
      },
    },
    4: {
      tagText: "配送完成",
      color: "70, 167, 253",
      btnText: "配送完成",
      fn: () => {
        console.log("配送完成");
      },
    },
  });
  const handleOption = (status,id) => {
    orderStatus[status].fn(id);
  };
  const allNum = computed(()=>(list)=>{
    let value = 0
    list.reduce((pro,it)=>{
      value += it.num
    },0)
    return value
  });
  const onSort = ()=>{
    list.value = list.value.reverse()
  };
  const callPhone = (phone)=>{
    uni.makePhoneCall({
      phoneNumber: phone
    })
  };
  const shouYi = async ()=>{
    let { data } = await userRebate()
    priceData.value = data
  };
  return { orderStatus, handleOption, currentUnfold , allNum , onSort , callPhone , shouYi , priceData };
}
onShow(async()=>{
  await GetOrderList()
  await shouYi()
})
</script>

<style lang="scss" scoped>
.tag {
  @apply flex items-center gap-[14rpx] px-[16rpx] h-[48rpx] rounded-full text-[24rpx] bg-opacity-[0.2];
}

.btn {
  @apply w-[432rpx] h-[80rpx] mx-auto rounded-full text-white font-bold text-center leading-[80rpx];
}

.bgBox{
  display: flex;
  padding: 8rpx 0;
  margin: 24rpx 30rpx;
  border-radius: 16rpx;
  background: linear-gradient( 180deg, #98CFFF 0%, #46A7FD 100%);
  .BB_Left{
    flex: 1;
    display: flex;
    padding: 24rpx 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 16rpx 0rpx 0rpx 16rpx;
    background-color: rgba(255,255,255,0.16);
    .BBL_Top{
      display: flex;
      align-items: center;
      margin-bottom: 22rpx;
      .BBLT_Left{
        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
      }
      .BBLT_Right{
        
        font-weight: 400;
        font-size: 26rpx;
        color: #FFFFFF;
        margin-left: 12rpx;
        padding: 3rpx 24rpx;
        border-radius: 16rpx;
        background-color: #46A7FD;
      }
    }
    .BBL_Bottom{
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
  .BB_Right{
    flex: 1;
    display: flex;
    padding: 24rpx 0;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 0rpx 16rpx 16rpx 0rpx;
    background-color: rgba(255,255,255,0.16);
    .BBR_Left{
      font-weight: 400;
      font-size: 24rpx;
      color: #FFFFFF;
      margin-bottom: 28rpx;
    }
    .BBR_Right{
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>
